<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Dubbo动态发布系统</title>

    <!--angular-->
    <script src="/webjars/angularjs/1.4.8/angular.js"></script>
    <script src="/webjars/angularjs/1.4.8/angular-resource.js"></script>
    <script src="/webjars/angularjs/1.4.8/angular-route.js"></script>

    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.5 -->
    <link rel="stylesheet" href="/webjars/adminlte/2.3.2/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="/webjars/font-awesome/4.5.0/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="/webjars/ionicons/2.0.1/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="/webjars/adminlte/2.3.2/dist/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="/webjars/adminlte/2.3.2/dist/css/skins/_all-skins.min.css">
    <!-- jQuery 2.1.4 -->
    <script src="/webjars/adminlte/2.3.2/plugins/jQuery/jQuery-2.1.4.min.js"></script>
    <!-- Bootstrap 3.3.5 -->
    <script src="/webjars/adminlte/2.3.2/bootstrap/js/bootstrap.min.js"></script>
    <!-- Slimscroll -->
    <script src="/webjars/adminlte/2.3.2/plugins/slimScroll/jquery.slimscroll.min.js"></script>
    <!-- FastClick -->
    <script src="/webjars/adminlte/2.3.2/plugins/fastclick/fastclick.min.js"></script>
    <!-- AdminLTE App -->
    <script src="/webjars/adminlte/2.3.2/dist/js/app.min.js"></script>
    <!-- AdminLTE for demo purposes -->
    <script src="/webjars/adminlte/2.3.2/dist/js/demo.js"></script>

    <!-- Bootstrap Color Picker -->
    <link rel="stylesheet" href="/webjars/adminlte/2.3.2/plugins/colorpicker/bootstrap-colorpicker.min.css">

    <link rel="stylesheet" href="/webjars/adminlte/2.3.2/plugins/select2/select2.min.css">
    <script src="/webjars/adminlte/2.3.2/plugins/select2/select2.full.min.js"></script>

    <link rel="stylesheet" href="/webjars/datetimepicker/2.4.7/jquery.datetimepicker.css">
    <link rel="stylesheet" href="/webjars/adminlte/2.3.2/plugins/iCheck/all.css">
    <script src="/webjars/datetimepicker/2.4.7/build/jquery.datetimepicker.full.js"></script>
</head>
<body ng-app="deployApp">
<!-- Content Wrapper. Contains page content -->
<div>
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            服务管理
            <small>主机列表</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i>服务管理</a></li>
            <li><a href="#">主机列表</a></li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="row" ng-controller="deployController">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-body">
                        <div class="row">
                            <div class="col-xs-3">
                                <form action="#"
                                      method="get" class="sidebar-form">

                                    <div class="input-group">
                                        <input name="search" ng-model="search" value="" class="form-control"
                                               placeholder="Search..." type="text"> <span
                                            class="input-group-btn">
												<button type="submit" name="search" id="search-btn"
                                                        class="btn btn-flat">
													<i class="fa fa-search"></i>
												</button>
											</span>
                                    </div>
                                </form>
                            </div>

                        </div>

                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <table id="table1"
                               class="table table-bordered  table-striped table-hover">
                            <thead>
                            <tr>
                                <th>Id</th>
                                <th>Application</th>
                                <th>Host</th>
                                <th>Protocol</th>
                                <th>Port</th>
                                <th>Interface</th>
                                <th>Service</th>
                                <th>Version</th>
                                <th>Filter</th>
                                <th>Registry</th>
                                <th>Timeout</th>
                                <th>Operation</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr ng-repeat="item in data| filter:search">
                                <td>{{item.id}}</td>
                                <td>{{item.application}}</td>
                                <td>{{item.host}}</td>
                                <td>{{item.protocol}}</td>
                                <td>{{item.port}}</td>
                                <td>{{item.interface}}</td>
                                <td>{{item.service}}</td>
                                <td>{{item.version}}</td>
                                <td>{{item.filter}}</td>
                                <td>{{item.registry}}</td>
                                <td>{{item.timeout}}</td>

                                <td>
                                    <button class="btn btn-danger btn-sm" ng-click="unexport(item.id,item.dynamicServiceUrl)"
                                            type="button">
                                        <i class="fa fa-trash-o">删除</i>
                                    </button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>
        </div>
    </section>
    <!-- /.content -->
</div>


</body>

<!-- /.content-wrapper -->

<script>
    var deployModule = angular.module('deployApp', []);
    deployModule.controller("deployController", function ($scope, $http) {


        $http.get("/dynamic/listDynamicBean")
                .success(function (response) {
                            $scope.data = response;
                        }
                );


        $scope.unexport = function (id, url) {
            $http.get("/dynamic/unexport?id=" + id + "&url=" + url)
                    .success(function (response) {
                        $scope.remove(id);
                    })
        }


        $scope.remove = function (id) {
            var index = $scope.findIndex(id);
            if (index !== -1) {
                $scope.data.splice(index, 1);
            }
        }

        $scope.findIndex = function (id) {
            var index = -1;

            angular.forEach($scope.data, function (item, key) {
                if (item.id === id) {
                    index = key;
                    return;
                }
            });

            return index;
        }
    })


</script>
</html>